<template>
  <div>
    <Row :gutter="16">
      <Col span="24">
        <table-select-common
            ref="tableSelect" v-model="selectedSchemes" :columns="columns" :items="items"
            :total-count="totalCount" placeholder="在表单模板名称、表单模板描述中搜索" @on-change="getPage" :tag-show="true"
            display-property="schemeName"
            :page-size="pageSize" :optional="optional"
            tag-color="success" :multi-select="false" @on-dblclick="dblClick"
            :loading="$store.state.formScheme.loading">
        </table-select-common>
      </Col>
    </Row>
    <form-scheme-modal v-if="formSchemeModalMount" v-model="formSchemeModalShow"
                       :modal-data="formSchemeModalData"></form-scheme-modal>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import TableSelectCommon from '@/components/select/table-select-common.vue';
import FormSchemeModal from '@/components/common-modal/form-scheme-modal.vue';

@Component({
  components: {TableSelectCommon, FormSchemeModal},
})
export default class FormSchemeSelect extends AbpBase {
  name: string = 'FormSchemeSelect';

  @Prop({type: Array, default: () => []}) value: any[];

  selectedSchemes: any[] = [];
  pageSize: number = 10;


  optional: any[] = [{key: 'startTime', value: '1900-01-01 00:00:00'}, {key: 'endTime', value: '2099-12-31 23:59:59'},{key:'formType',value:[]}];
  formSchemeModalMount: boolean = false;
  formSchemeModalShow: boolean = false;
  formSchemeModalData: any = {};

  columns = [
    {
      title:'表单模板名称',
      key:'schemeName',
      align:'center',
      width:300,
      tooltip:true,
      resizable:true,
      ellipsis:true,
      tooltipTheme:'light',
      sortable: this.$config.sorting.form.scheme,
    },

    {
      title:'表单类型',
      key:'formType',
      align:'center',
      width:120,
      tooltip:true,
      resizable:true,
      ellipsis:true,
      tooltipTheme:'light',
      render: (h: any, params: any) => {
        if (params.row.formType === 0) {
          return h('Tag', {
            props:{
              color:this.$config.color.success,
            },
          }, '用户设计');
        }
        if (params.row.formType === 1) {
          return h('Tag', {
            props:{
              color:this.$config.color.warning,
            },
          }, '系统内置')
        }
      },
      filters: [
        {
          label: '用户设计',
          value: 0,
        }, {
          label: '系统内置',
          value: 1,
        },
      ],

      filterRemote:(array)=>{
        const index=this.optional.findIndex((item)=>{
          return item.key==='formType';
        });
        if(index!==-1){
          this.optional.splice(index,1);
        }
        this.optional.push({key:'formType',value:array})
      },
    },
    {
      title:'表单模板描述',
      key:'description',
      align:'center',
      minWidth:200,
      tooltip:true,
      resizable:true,
      ellipsis:true,
      tooltipTheme:'light',
    },
    {
      title: '操作',
      width: 110,
      render: (h, params) => {
        return h('Button', {
          attrs: {},
          props: {
            size: 'small',
            type: 'info',
            icon: 'md-eye',
          },
          on: {
            click: () => {
              this.display(params.row);
            },
          },
        }, '预览');
      },
      align: 'center',
    },

  ];

  @Watch('selectedSchemes')
  selectedSchemesChange(newVal) {
    this.$emit('input', newVal);
  }



  get totalCount() {
    return this.$store.state.formScheme.totalCount;
  }

  get items() {
    return this.$store.state.formScheme.list;
  }


  dblClick() {
    this.$emit('on-dblclick');
  }



  async init() {
    await this.getPage({
      sorting: '',
      filter: '',
      maxResultCount: this.pageSize,
      skipCount: 0,
      connectId: 0,
      startTime: '1900-01-01 00:00:00',
      endTime: '2099-12-31 23:59:59',
    });
  }

  async getPage(args) {
    await this.$store.dispatch({
      type: 'formScheme/obtainFormSchemes',
      data: args,
    });
  }

  display(row: any) {
    this.formSchemeModalData = {formScheme: row, type: 'insert'};
    this.formSchemeModalMount = true;
    this.$nextTick(() => {
      this.formSchemeModalShow = true;
    });
  }



  async created() {

    await this.init();
  }

  mounted() {

  }

}
</script>

<style lang="less" scoped>

</style>
